<!--
        Copyright (c) 2023, LXMS (lxinet.cn).

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<template>
  <div class="toolsBox" v-if="ltTools.length>0||rtTools.length>0">
    <div class="lt">
      <a-button v-for="item in ltTools" :key="item.key" v-bind="item.props" @click="handleClick(item)" v-has="item.permission">
        <template v-if="item.icon" #icon>
          <component :is="item.icon"></component>
        </template>
        {{item.title}}
      </a-button>
    </div>
    <div class="rt">
      <a-button v-for="item in rtTools" :key="item.key" v-bind="item.props" @click="handleClick(item)">
        <template v-if="item.icon" #icon>
          <component :is="item.icon"></component>
        </template>
        {{item.title}}
      </a-button>
    </div>
  </div>
  <a-table v-if="tbData && tbData.length"
    :data-source="tbData"
    :columns="columns"
    :scroll="scrollData"
    :rowKey="rowKey"
    :pagination="hasPagination?pagination:false"
    :defaultExpandAllRows="defaultExpandAllRows"
    :row-selection="selectionType === 'none' ? null : {type:selectionType, selectedRowKeys: sRowKeys, onChange: onSelectChange }"
    :loading="loading"
    @change="handleChange"
  >

    <template v-slot:bodyCell="{column,record,index}" >

      <template v-if="!column.render" >
        {{record[column.key]}}
      </template>

      <template v-if="column.render==='index'">
        {{index+1}}
      </template>

      <template v-else>
        <slot :name="column.render" :row="record" :index="index"></slot>
      </template>
    </template>
  </a-table>

</template>

<script>
  export default {
    name: "lxTable",
    props: {
      dataSource: {
        type: Array,
        default: () => [],
      },
      columns: {
        type: Array,
        default: () => [],
      },
      ltTools: {
        type: Array,
        default: () => [],
      },
      rtTools: {
        type: Array,
        default: () => [],
      },
      scrollData: {
        type: Object,
        default: () => {
          return {y: document.body.clientHeight - 300}
        }
      },
      url: {
        type: String,
        default: ""
      },
      autoLoad: {
        type: Boolean,
        default: true,
      },
      params: {
        type: Object,
        default: () => ({})
      },
      hasPagination: {
        type: Boolean,
        default: true,
      },
      rowKey: {
        type: String,
        default: ""
      },
      selectedRows:{
        type: Array,
        default: []
      },
      selectedRowKeys: {
        type: Array,
        default: []
      },
      selectionType: {
        type: String,
        default: "checkbox"
      },
      showIndex:{
        type:Boolean,
        default:true
      },
      defaultExpandAllRows:{
        type:Boolean,
        default:false
      }

    },
    data() {
      return {
        tbData: [],
        filters: {
          pageNo: 1,
          pageSize: 10,
        },
        pagination: {
          total: "0",
          current: "0"
        },
        loading: false,
        sRowKeys: this.selectedRowKeys || [],


      }


    },
    methods: {

      handleChange(item) {
        console.log(item)
        this.loadData(item.current);

      },
      onSelectChange(item, row) {
        this.sRowKeys = item;
        this.$emit('update:selectedRowKeys', item);
        this.$emit('update:selectedRows', row)

      },
      loadDataImpl(pageNo) {
        this.filters.pageNo = pageNo || this.filters.pageNo;
        this.$request({
          url: this.url,
          method: "GET",
          data: {
            ...this.filters,
            ...this.params
          },
        }).then((res) => {
          this.tbData = res.data;
          this.pagination = {
            total: res.page.totalCount,
            current: res.page.pageNo,
            pageSize: res.page.pageSize
          }
        }).finally(() => {
          this.loading = false;

        })
      },
      loadData(pageNo) {
        this.loading = true;
        if (this.hasPagination) {
          this.loadDataImpl(pageNo);
          return;
        }
        this.$request({
          url: this.url,
          method: "GET",
          data: {
            ...this.params
          },
        }).then((res) => {
          console.log(res.data, "======")
          this.tbData = res.data;

        }).finally(() => {
          this.loading = false;
        })

      },

      handleClick(item){
        this.$emit("handleToolsClick",item)

      }
    },
    mounted() {
      let opt= {
        key: "",
        title: "序号",
        width:50,
        render:"index",
        align:"center"
      }

      if(this.showIndex){
        this.columns.unshift(opt)
      }
      console.log(this.autoLoad);
      if (!this.autoLoad) return this.tbData = this.dataSource;
      this.loadData()
    },

    watch: {
      selectedRowKeys(val) {
        this.sRowKeys = val || []
      }
    },


  }
</script>

<style lang="less" scoped>
  :deep(.ant-table) {
    .ant-table-cell {
      padding: 10px;
      &:before {
        display: none;
      }
      .ant-btn {
        &:nth-child(1) {
          margin-left: -10px;
        }
      }

    }
  }

  .toolsBox {
    display: flex;
    padding-bottom: 10px;
    .lt {
      .ant-btn {
        margin-right: 10px;
      }
    }
    .rt {
      flex: 1;
      text-align: right;
      .ant-btn {
        margin-left: 10px;
      }
    }
  }

</style>

